<template>
  <j-modal
    :title="'用户登录情况'"
    :width="1000" 
      switchFullscreen
      :fullscreen="true"
    :visible="visible"
    :maskClosable="false"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :confirmLoading="loading"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="8" :sm="10">
              <a-form-item label="日期">
                <a-range-picker
                  style="width: 210px"
                  v-model="queryParam.createTimeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange"
                  @ok="onDateOk"
                />
              </a-form-item>
            </a-col>
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset1" icon="reload" style="margin-left: 8px; left: 10px"
                  >重置</a-button
                >
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>

      <a-table ref="table" size="middle"       class="j-table-force-nowrap"
          :scroll="{ x: true }" rowKey="id" :columns="columns" :dataSource="tbList" :loading="loading">
      </a-table>
    </a-spin>
  </j-modal>
</template>

<script>
import moment from 'moment'
import { deleteAction, getAction, postAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
export default {
  name: 'UserListLoginLog',
  data() {
    return {
      title: '',
      loading: false,
      confirmLoading: false,
      queryParam: {
        createTimeRange: [],
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
            title: '用户账号',
            align: "center",
            dataIndex: '用户账号',
            width: 120,
            fixed: 'left',
          },
          {
            title: '用户姓名',
            align: "center",
            width: 100,
            dataIndex: '用户姓名',
            fixed: 'left',
          },
      ],
      tbList: [],
      url: {
        list: '/sys/user/loginLog',
      },
      visible: false,
      drawerWidth: '80%',
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    this.initDate()
  },
  methods: {
    show() {
      this.visible = true
      this.loadData()
    },
    searchQuery() {
      this.loadData()
    },
     searchReset1() {
        this.initDate()
        this.loadData();
      },
      initDate(){
        let date = new Date()
        var year = new Date().getFullYear()
        var month = new Date().getMonth()
        let date2 = new Date(year,month,1)
        this.date2 = moment(date2).format('YYYY-MM-DD')
        this.date = moment(date).format('YYYY-MM-DD')
        this.queryParam.createTimeRange = [moment(this.date2),moment(this.date)]
        this.queryParam.createTime_begin = this.date2
        this.queryParam.createTime_end = this.date
      },
    loadData() {
      var that = this;
      let sqp = {}
      var param = Object.assign(sqp, this.queryParam)
      getAction(this.url.list, param).then((res) => {
        if (res.success) {
          this.tbList = res.result 
          that.columns =  [ 
            {
                title: '用户账号',
                align: "center",
                dataIndex: '用户账号',
                width: 120,
                fixed: 'left',
              },
              {
                title: '用户姓名',
                align: "center",
                width: 100,
                dataIndex: '用户姓名',
                fixed: 'left',
              },
          ]
           for (const key in this.tbList[0]) {
            if(key =='用户账号' || key =='用户姓名'){
              continue;
            }
            if (Object.hasOwnProperty.call(this.tbList[0], key)) {
                const element = this.tbList[0][key];
                 that.columns.push({
                  title: key,
                  dataIndex: key, 
                  align: 'center',
                  width: 100
                })
            }
           }
           
        }
      })
    },
    onDateChange: function (value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    onDateOk(value) {
      console.log(value)
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script> 